<ix-page-header [pageTitle]="pageTitle">
  @if (loadingExtraColumns$ | async) {
    <mat-spinner
      [diameter]="30"
    ></mat-spinner>
  } @else {
    <ix-slide-toggle
      [formControl]="showExtraColumnsControl"
      [label]="'Show extra columns' | translate"
    ></ix-slide-toggle>
  }

  <ix-search-input1
    [value]="filterString"
    (search)="onListFiltered($event)"
  ></ix-search-input1>

  <button
    *ixRequiresRoles="requiredRoles"
    mat-button
    color="primary"
    ixTest="add-snapshot"
    [ixUiSearch]="searchableElements.elements.add"
    (click)="doAdd()"
  >
    {{ 'Add' | translate }}
  </button>
</ix-page-header>

@if (selectedSnapshots.length) {
  <div class="batch-actions-toolbar">
    <div class="title">
      <strong>{{ 'Batch Operations' | translate }}</strong>
    </div>

    <div class="actions">
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        matTooltipPosition="below"
        ixTest="delete-selected"
        [matTooltip]="'Delete selections' | translate"
        [disabled]="!selectionHasItems"
        (click)="doBatchDelete(selectedSnapshots)"
      >
        <ix-icon name="mdi-delete"></ix-icon>
        {{ 'Delete' | translate }}
      </button>
    </div>
  </div>
}

<ix-table
  class="table"
  [ixUiSearch]="searchableElements.elements.list"
  [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
  [emptyConfig]="emptyService.defaultEmptyConfig(emptyType$ | async)"
>
  <thead
    ix-table-head
    [columns]="columns"
    [dataProvider]="dataProvider"
  ></thead>
  <tbody
    ix-table-body
    detailsRowIdentifier="name"
    [columns]="columns"
    [dataProvider]="dataProvider"
    [isLoading]="!!(isLoading$ | async)"
  >
    <ng-template let-snapshot ix-table-details-row [dataProvider]="dataProvider">
      <ix-snapshot-details-row [snapshot]="snapshot"></ix-snapshot-details-row>
    </ng-template>
  </tbody>
</ix-table>
<ix-table-pager [dataProvider]="dataProvider"></ix-table-pager>
